<template>
  <q-page>
    <div class="row justify-center" v-if="$q.screen.gt.xs">
      <div class="col-xl-8 col-lg-10 col-md-12 col-sm-12" :class="{'q-mt-lg q-mx-sm': $q.screen.gt.sm}">
        <div :class="{'shadow-3 q-mx-sm border-2-333': $q.screen.gt.sm}">
          <q-carousel
            keep-alive
            animated
            infinite
            transition-prev="slide-right"
            transition-next="slide-left"
            :autoplay="10000"
            arrows
            v-model="carousel"
            :height="indexBarHeight + 'px'"
            control-color="black"
            class="text-white"
          >
            <q-carousel-slide name="1" class="row items-center" img-src="https://ageeye-barimage.oss-cn-hangzhou.aliyuncs.com/bar/media.jpg">
              <div class="row col-6 justify-center">
                <div class="column items-center q-px-lg">
                  <img width="120px" src="/statics/weixin-qrcode.jpg"/>
                  官方公众号地图书
                </div>
              </div>
              <div class="col-6">
                <div style="font-size: 24px" class="bold text-yellow">官方公众号</div>
                <div class="size-14">关注公众号地图书，每日分享文章、地图、网站、工具、书籍等人文地理资源。</div>
                <div class="size-14">关注后回复“古地图”，获取发现中国网盘资源链接。</div>
                <div class="size-14">加入官方QQ群，认识朋友、讨论问题、反馈意见。</div>
                <div class="q-mt-sm q-gutter-x-md">
                  <a href="https://zhuanlan.zhihu.com/ageeye" target="_blank">
                    <q-btn color="white" class="size-18" outline>知乎专栏</q-btn>
                  </a>
                  <a href="https://www.toutiao.com/c/user/76689429502/#mid=1585317778518030" target="_blank">
                    <q-btn color="white" class="size-18" outline>头条号</q-btn>
                  </a>
                  <a href="https://jq.qq.com/?_wv=1027&k=5T7tGKi" target="_blank">
                    <q-btn color="white" class="size-18" outline>QQ群</q-btn>
                  </a>
                </div>
              </div>
            </q-carousel-slide>
            <q-carousel-slide name="2" class="row items-center" img-src="https://ageeye-barimage.oss-cn-hangzhou.aliyuncs.com/bar/code.jpg">
              <div class="row col-6 justify-center">
              </div>
              <div class="col-6">
                <div style="font-size: 24px" class="bold text-yellow">发现中国开放运营</div>
                <div class="size-14">我们成立了志愿者团队，开放了网站代码，每季度发布运营报告。</div>
                <div class="q-mt-sm q-gutter-x-md">
                  <a href="https://gitee.com/ageeye/ageeye.cn" target="_blank">
                    <q-btn color="white" class="size-18" outline>发现中国志愿者团队</q-btn>
                  </a>
                  <a href="https://gitee.com/ageeye/ageeye-web" target="_blank">
                    <q-btn color="white" class="size-18" outline>ageeye-web</q-btn>
                  </a>
                </div>
              </div>
            </q-carousel-slide>
            <q-carousel-slide name="3" class="row items-center bold text-white"
                              img-src="https://ageeye-barimage.oss-cn-hangzhou.aliyuncs.com/bar/bar.jpg">
              <div class="offset-7 col-5">
                <div style="font-size: 30px">地图分享知识</div>
                <div class="size-18">创建属于你的知识地图</div>
                <div class="q-mt-sm">
                  <q-btn color="white" class="size-18" outline @click="createMap">创建地图</q-btn>
                </div>
              </div>
            </q-carousel-slide>
            <!--<q-carousel-slide name="3"-->
                              <!--class="column items-center bold text-black text-shadow-no-offset-white justify-center"-->
                              <!--img-src="https://ageeye-barimage.oss-cn-hangzhou.aliyuncs.com/bar/old.jpg">-->
              <!--<div style="font-size: 33px">中国古地图</div>-->
              <!--<div class="size-18">泛览经史，流观山海</div>-->
              <!--<q-btn to="/topic/old/" color="black" class="size-18 q-mt-sm" outline>浏览</q-btn>-->
            <!--</q-carousel-slide>-->
          </q-carousel>
        </div>
      </div>
    </div>
    <div class="row justify-center">
      <div class="col-xl-8 col-lg-10 col-md-12 col-sm-12" :class="{'q-mt-md': $q.screen.gt.sm}">
        <div v-if="$q.screen.lt.md" class="border-bottom-1-eee q-mb-sm">
          <a-search class="q-mx-sm q-my-sm"></a-search>
        </div>
        <nav class="nav-menu row col-xl-8 col-lg-10 col-md-12 col-sm-12 bold size-18">
          <template v-for="nav of navs">
            <div v-if="nav" :key="nav.title" class="q-mb-xs items-center col-xl-4 col-lg-4 col-md-4 col-xs-12 col-sm-6">
              <div class="q-py-md q-px-md q-mx-sm bg-grey-3 row" :class="{'gt-sm': nav.hideInMobile }">
                <a v-if="nav.href" class="row col" :href="nav.href">
                  <span class="col">{{ nav.title }}</span>
                  <q-icon :name="nav.icon" class="size-24 text-grey-5"></q-icon>
                </a>
                <a v-else-if="nav.action" class="row col" @click="nav.action">
                  <span class="col">{{ nav.title }}</span>
                  <q-icon :name="nav.icon" class="size-24 text-grey-5"></q-icon>
                </a>
              </div>
            </div>
          </template>
        </nav>
        <div v-if="$q.screen.lt.sm" class="row q-mx-sm bg-grey-3 q-pa-sm border-radius-4">
          <div><img src="/statics/weixin-qrcode.jpg" width="60vw" height="60vw"></div>
          <div class="col size-12 text-grey-9 q-pl-sm">
            关注发现中国官方公众号“地图书”，每日分享文章、地图、网站、工具、书籍等人文地理资源。
          </div>
        </div>
        <div class="row q-pt-lg">
          <div class="col-xl-9 col-lg-9 col-md-9" :class="{'q-pr-sm': $q.screen.gt.md}">
            <a-map-image-boxes v-if="recommendMaps" :maps="recommendMaps" title="推荐地图" link="/map"></a-map-image-boxes>
            <a-map-image-boxes v-if="recentlyMaps" :maps="recentlyMaps" title="最近更新"
                               link="/map/?is_recommend=0&ordering=-update_date"></a-map-image-boxes>
            <!--<a-article-boxes v-if="hotForums" :articles="hotForums" title="热门讨论"></a-article-boxes>-->
          </div>
          <div class="col-xl-3 col-lg-3 col-md-3 q-px-sm">
            <a-tags :tags="tags" title="热门标签"></a-tags>
            <a-article-list v-if="mostReadMaps && $q.screen.gt.md" :articles="mostReadMaps" title="最多阅读" path="map"
                            link="/map?ordering=-up_number"></a-article-list>
            <a-article-list v-if="recentlyForums && $q.screen.gt.md" :articles="recentlyForums" title="最新讨论"
                            path="forum" link="/forum"></a-article-list>
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
  import AMapImageBoxes from '../components/mapImageBoxes'
  import AArticleList from '../components/articleList'
  import AArticleBoxes from '../components/articleBoxes'
  import ATags from '../components/tags'
  import { mapGetters } from 'vuex'

  export default {
    name: 'PageIndex',
    components: { AMapImageBoxes, AArticleList, AArticleBoxes, ATags },
    data: function () {
      return {
        search: '',
        images: [1, 2],
        carousel: '1',
        tags: [
          '古地图',
          '历史',
          '小说',
          '军事',
          '地缘',
          '武侠',
          '文化',
          '旅游',
          '古城',
          '考古',
          '战争',
          '春秋',
          '战国',
          '汉朝',
          '三国',
          '明朝',
          '宋朝',
          '唐朝',
          '清朝',
          '民国',
          '日本',
          '亚洲',
          '欧洲',
          '美洲'
        ],
        hotUsers: null,
        recommendMaps: null,
        recentlyMaps: null,
        mostReadMaps: null,
        recentlyForums: null,
        hotForums: null,
        arrows: false
      }
    },
    created () {
      this.getIndex()
    },
    computed: {
      ...mapGetters([]),
      mapImageListNumber () {
        const windowWidth = this.$q.screen.width

        if (windowWidth > 1600) {
          return 6
        } else if (windowWidth > 1200) {
          return 6
        } else if (windowWidth > 800) {
          return 6
        } else {
          return 4
        }
      },
      indexBarHeight () {
        const windowWidth = this.$q.screen.width

        if (windowWidth > 1600) {
          return 360
        } else if (windowWidth > 1200) {
          return 340
        } else if (windowWidth > 800) {
          return 320
        } else if (windowWidth > 576) {
          return 280
        } else {
          return 180
        }
      },
      navs () {
        return [
          {
            title: '中国历史地图',
            href: '/china/',
            icon: 'arrow_forward',
            hideInMobile: false
          },
          {
            title: '中国古地图',
            href: '/topic/old/',
            icon: 'arrow_forward',
            hideInMobile: false
          },
          // {
          //   title: '地图配准',
          //   href: '/old/',
          //   icon: 'gps_fixed',
          //   hideInMobile: true
          // },
          {
            title: '创建地图',
            icon: 'add',
            hideInMobile: true,
            action: this.createMap
          }
        ]
      },
      isMicroMessenger () {
        return window.navigator.userAgent.match(/MicroMessenger/i)
      }
    },
    methods: {
      getIndex () {
        this.getRecommendMaps()
        this.getRecentlyMaps()
        this.getHotForums()
        this.getMostReadMaps()
        this.getRecentlyForums()
        this.getHostUsers()
      },
      async getRecommendMaps () {
        try {
          const res = await this.$axios('/api/map/',
            { params: { limit: this.mapImageListNumber, is_recommend: 1 } }
          )
          this.recommendMaps = res.data.results
        } catch (e) {
          console.log(e)
        } finally {
        }
      },
      async getRecentlyMaps () {
        try {
          const res = await this.$axios('/api/map/',
            { params: { limit: this.mapImageListNumber, is_recommend: 0 } }
          )
          this.recentlyMaps = res.data.results
        } catch (e) {
          console.log(e)
        } finally {
        }
      },
      async getMostReadMaps () {
        try {
          const res = await this.$axios('/api/map/',
            { params: { limit: 10, ordering: '-up_number' } }
          )
          this.mostReadMaps = res.data.results
        } catch (e) {
          console.log(e)
        } finally {
        }
      },
      async getRecentlyForums () {
        try {
          const res = await this.$axios('/api/forum/',
            { params: { limit: 6, ordering: '-add_date' } }
          )
          this.recentlyForums = res.data.results
        } catch (e) {
          console.log(e)
        } finally {
        }
      },
      async getHostUsers () {
        try {
          const res = await this.$axios('/api/user/hot_users/')
          this.hotUsers = res.data.results
        } catch (e) {
          console.log(e)
        } finally {
        }
      },
      async getHotForums () {
        try {
          const res = await this.$axios('/api/forum/',
            { params: { limit: this.mapImageListNumber } }
          )
          this.hotForums = res.data.results
        } catch (e) {
          console.log(e)
        } finally {
        }
      },
      createMap () {
        if (!this.auth) {
          this.$router.push('/login/')
        }
        this.$root.$emit('openCreateModal')
      }
    }
  }
</script>

<style lang="stylus">
  @import "~quasar/dist/quasar.styl"
  #search
    @media screen and (min-width 1200px)
      position absolute
      z-index 100
      left 15px
      right: 15px
      top: 20px

  .nav-menu
    > div > div
      background-position right center
      background-size cover
      cursor pointer
      clip-path polygon(2% 0%, 98% 0%, 100% 10%, 100% 90%, 98% 100%, 2% 100%, 0% 90%, 0% 10%)
      a
        color #000
      &:hover
        background-color $negative!important
        a, i
          color #fff !important
</style>
